<template>
  <div>
    <base-up
      ref="BaseUp"
      :accepts="['mp4']"
      :disabled="!!(uploading || result)"
      @progress="progressFunc"
      @start="startUpload"
      @success="success"
      @error="upError"
    >
      <div ref="video-up-com" class="video-up-com">
        <div ref="progress-dom" class="progress-dom" />
        <svgicon
          v-if="!uploading"
          name="edit"
          width="30"
          height="30"
          class="edit-icon"
          @click.native.stop="inputTextClick"
        />
        <template v-if="result">
          <video class="video-box" :src="result" autoplay controls="controls" />
          <svgicon
            name="remove"
            width="30"
            height="30"
            class="clear-icon"
            @click.native.stop="removeClick"
          />
        </template>
        <template v-else>
          <template v-if="uploading">
            <template v-if="progress">
              <template v-if="isStop">
                <svgicon
                  name="remove"
                  width="30"
                  height="30"
                  class="clear-icon"
                  @click.native.stop="removeClick"
                />
                <svgicon
                  name="start"
                  width="30"
                  height="30"
                  class="status-icon"
                  @click.native.stop="statusClick(false)"
                />
              </template>
              <svgicon
                v-else
                name="stop"
                width="30"
                height="30"
                class="status-icon"
                @click.native.stop="statusClick(true)"
              />
            </template>
            <div v-else class="spin-box w-flex-center">
              <a-spin size="large" />
            </div>
          </template>
          <svgicon
            v-else
            name="add"
            width="100"
            height="100"
            class="add-icon"
            color="#ccc"
          />
        </template>
      </div>
    </base-up>
    <input-modal ref="InputModal" title="添加链接" @success="inputSuccess" />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import ECharts from 'echarts'
import BaseUp, { BaseFileUpType } from '@/components/global/fileUp/base'
import '@/icons/add'
import '@/icons/start'
import '@/icons/stop'
import '@/icons/remove'
import '@/icons/edit'
import InputModal, { InputModalComType } from '@/components/global/modal/input'

@Component({
  name: 'VideoUp',
  components: {
    BaseUp,
    InputModal
  }
})
export default class VideoUp extends Vue {
  chart?: ECharts.ECharts
  uploading = false
  isStop = false
  result = ''
  progress = 0

  progressFunc (progress: number) {
    this.progress = progress
    this.setData(progress)
  }

  startUpload () {
    this.uploading = true
    this.echartsInit()
  }

  statusClick (isStop: boolean) {
    this.isStop = isStop
    if (isStop) {
      (this.$refs.BaseUp as BaseFileUpType).stop()
    } else {
      (this.$refs.BaseUp as BaseFileUpType).start()
    }
  }

  removeClick () {
    this.$confirm({
      title: '删除提示',
      content: '删除后需要重新上传',
      onOk: () => {
        (this.$refs.BaseUp as BaseFileUpType).clear()
        this.clearData()
      }
    });
  }

  inputTextClick () {
    (this.$refs.InputModal as InputModalComType).show()
  }

  inputSuccess (text: string) {
    this.result = text
    this.$emit('success', text)
  }

  upError () {
    this.clearData()
  }

  echartsInit () {
    const el = this.$refs['progress-dom'] as HTMLDivElement
    this.chart = ECharts.init(el)
  }

  clearData () {
    this.result = ''
    this.uploading = false
    this.isStop = false
    this.progress = 0
    if (this.chart) {
      this.chart!.clear()
      this.chart = undefined
    }
  }

  success (url: string) {
    this.upError()
    this.result = url
    this.$emit('success', url)
  }

  setData (progress: number = 0) {
    const intP = Math.trunc(progress * 100)
    const option = {
      series: [
        {
          name: '访问来源',
          type: 'pie',
          silent: true,
          legendHoverLink: false,
          radius: ['50%', '70%'],
          avoidLabelOverlap: false,
          hoverAnimation: false,
          animation: false,
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: false
            }
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: intP,
              name: `${intP}%`,
              label: {
                show: true,
                position: 'center',
                color: '#999',
                fontSize: '20'
              },
              itemStyle: {
                color: '#409EFF'
              }
            },
            {
              value: 100 - intP,
              name: '',
              itemStyle: {
                color: '#eee'
              }
            }
          ]
        }
      ]
    }
    this.chart!.setOption(option as any, true, true)
  }

  getResult () {
    return this.result
  }
}
</script>

<style scoped lang="less">
.video-up-com {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px dashed #ddd;
  cursor: pointer;
  position: relative;

  .add-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px;
  }

  .video-box {
    width: 100%;
    height: 100%;
  }

  .progress-dom {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .status-icon, .clear-icon, .edit-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
    fill: #ccc;
  }

  .clear-icon {
    bottom: auto;
    top: 10px;
  }

  .edit-icon {
    bottom: auto;
    right: auto;
    top: 10px;
    left: 10px;
  }

  .status-icon:hover, .clear-icon:hover, .edit-icon:hover {
    fill: #666;
  }

  .spin-box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>
